<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div class="container">

    <pre>
        <h4>
            bootStrap中的导航都依赖于class="nav"，但是class="nav"默认不会提供导航样式的，必须和其他附加样式组合才能
            呈现出导航。
        </h4>
    </pre>
    <h3>nav-tabs导航样式(选项卡导航)</h3>
    <ul class="nav nav-tabs">
        <li><a href="javaScript:">网页</a></li>
        <li><a href="javaScript:">音乐</a></li>
        <li><a href="javaScript:">视频</a></li>
        <li><a href="javaScript:">图片</a></li>
        <li><a href="javaScript:">贴吧</a></li>
    </ul>
    <h3>Pills导航(胶囊导航)</h3>
    <ul class="nav nav-pills">
        <li><a href="javaScript:">网页</a></li>
        <li><a href="javaScript:">音乐</a></li>
        <li><a href="javaScript:">视频</a></li>
        <li><a href="javaScript:">图片</a></li>
        <li><a href="javaScript:">贴吧</a></li>
    </ul>
    <h3>nav-stacked垂直导航(需在nav-pills基础上)</h3>
    <ul class="nav nav-pills nav-stacked">
        <li><a href="javaScript:">网页</a></li>
        <li><a href="javaScript:">音乐</a></li>
        <li><a href="javaScript:">视频</a></li>
        <li><a href="javaScript:">图片</a></li>
        <li><a href="javaScript:">贴吧</a></li>
    </ul>
    <h3>导航状态(胶囊导航)</h3>
    <ul class="nav nav-pills">
        <li class="active"><a href="javaScript:">网页</a></li>
        <li class="hover"><a href="javaScript:">音乐</a></li>
        <li><a href="javaScript:">视频</a></li>
        <li><a href="javaScript:">图片</a></li>
        <li class="disabled"><a href="javaScript:">贴吧</a></li>
    </ul>

    <h3>nav-justified自适应导航(需要和nav-tabs或nav-pills一起使用)</h3>
    <ul class="nav nav-tabs nav-justified">
        <li><a href="javaScript:">网页</a></li>
        <li><a href="javaScript:">音乐</a></li>
        <li><a href="javaScript:">视频</a></li>
        <li><a href="javaScript:">图片</a></li>
        <li><a href="javaScript:">贴吧</a></li>
    </ul>
    <h3>二级导航</h3>
    <ul class="nav nav-pills">

        <li><a href="javaScript:">网页</a></li>
        <li class="dropdown">
            <a href="javaScript:" class="dropdown-toggle" data-toggle="dropdown">
                音乐  <span class="caret"></span>
            </a>

            <ul class="dropdown-menu">
                <li class="dropdown-header">标题</li>
                <li><a href="javaScript:">轻音乐</a></li>
                <li><a href="javaScript:">流行音乐</a></li>
                <li class="divider"></li>
                <li><a href="javaScript:">古典音乐</a></li>
            </ul>
        </li>
        <li><a href="javaScript:">视频</a></li>
        <li><a href="javaScript:">图片</a></li>
        <li><a href="javaScript:">贴吧</a></li>
    </ul>

    <h3>面包屑导航</h3>
    <ul class="breadcrumb">
        <li><span class="glyphicon glyphicon-home"></span><a href="javaScript:">首页</a></li>
        <li><a href="javaScript:">仓库作业</a></li>
        <li><a href="javaScript:">入库管理</a></li>
        <li><a href="javaScript:">新增如可</a></li>
    </ul>
</div>
</body>
</html>